﻿@page "/app/english/word"
@using BluePig.Pages.App.ECommerce.Shop
@using BluePig.OpenAPIs
@using BluePig.Pages.App.English.Word.ViewModel
@using BluePig.Data.App.English
@using Blazored.Video
@using Blazored.Video.Support
@inherits ProCompontentBase


@inject IHttpClientFactory ClientFactory
@inject BluePigHttpClient BluePigHttpClient


<div class="mr-n3">
    <MRow>
        <MCol Md=4 Sm=12>
            <MCard Elevation=0 Class="line px-6 py-3 block-between">
                <h6>@_shopData.CurrentCount results found</h6>
                <MMenu OffsetY OpenOnHover>
                    <ActivatorContent>
                        <div @attributes="@context.Attrs">
                            <span class="text-btn neutral-lighten-4--text">@_shopData.SortTypeLable</span>
                            <MIcon Color="neutral-lighten-4">mdi-menu-down</MIcon>
                        </div>
                    </ActivatorContent>
                    <ChildContent>
                        <MList Class="py-0">
                            <MListItemGroup @bind-Value="_shopData.SortTypeLable" ActiveClass="primary white--text">
                                <MListItem Value="@(SortType.Featured.ToString())">Featured </MListItem>
                                <MListItem Value="@(SortType.Lowest.ToString())"> Lowest </MListItem>
                                <MListItem Value="@(SortType.Highest.ToString())"> Highest </MListItem>
                            </MListItemGroup>
                        </MList>
                    </ChildContent>
                </MMenu>
            </MCard>
        </MCol>
        <MCol Md=8 Sm=12>
            <MTextField @bind-Value="_shopData.Search" Class="rounded-2 max-height" HideDetails="@("auto")" Height=54 Flat Solo Placeholder="Search Product">
                <PrependInnerContent>
                    <MIcon Size=16 Class="mr-2 neutral-lighten-1--text">mdi-magnify</MIcon>
                </PrependInnerContent>
            </MTextField>
        </MCol>
    </MRow>
    <MRow>
        @foreach (var item in _shopData.GetPageDatas())
        {
            <MCol Md=4 Sm=12>
                <div class="commodity">
                    <MCard Class="rounded-4 content">
                        @*<MImage Height=260 Contain Src="@item.Mp4Url" Class="hover-pointer" @onclick="()=>NavigateToDetails(item.Id)"></MImage>*@
                        <BlazoredVideo Play="OnPlay"
                                       
                                       style="max-width:600px; width: 100%;  min-height:300px; display: flex;"
                                       controls="controls">
                            <source src="@item.Mp4Url" type="video/mp4" />
                            @*<track src="@item.LineUrl" label="中文" srclang="zh" kind="subtitles" default />*@
                        </BlazoredVideo>
                        <MCardText Class="pa-3">
                           @* <div class="block-between">
                                <MRating Value="item.Id" Size=20 Dense Readonly Length=5 Color="remind" BackgroundColor="remind"></MRating>
                                <h6>$@item.En</h6>
                            </div>*@
                            <h3 @onclick="()=>NavigateToDetails(item.Id)" class="hover-pointer text-subtitle text-truncate my-1" style="cursor:pointer;font-size: 1.8rem !important; padding: 10px 0px !important;">@item.En</h3>
                            <div class="text-truncate text-body3 neutral-lighten-3--text" style="word-break: break-all;white-space: pre-line;">@item.Cn</div>
                        </MCardText>
                        <div class="block-between text-center">
                            <div @onclick="()=>item.HaveMp4=!item.HaveMp4" class="rounded-bl-xl hover-pointer favorite" style="width:50%;height:56px;line-height: 56px;box-shadow: inset -1px 0px 0px #F0F3FA, inset 0px 0.5px 0px #F0F3FA;border-bottom-left-radius: 20px !important;">
                                <MIcon Size=24 Color="@(item.HaveMp4?"error":"neutral")">@(item.HaveMp4?"mdi-heart":"mdi-heart-outline")</MIcon>
                            </div>
                            <div @onclick="NavigateToOrder" class="hover-pointer neutral--text order" style="width:50%;height:56px;line-height: 56px;box-shadow: inset -1px 0px 0px #F0F3FA, inset 0px 0.5px 0px #F0F3FA;border-bottom-right-radius: 20px !important;">
                                <MIcon Size=24 Class="white-order">mdi-cart-outline</MIcon>
                            </div>
                        </div>
                    </MCard>
                </div>
            </MCol>
        }
    </MRow>
</div>

@if (_shopData?.PageCount > 0)
{
    <MPagination @bind-Value="_shopData.PageIndex" Color="primary" Circle Length=@_shopData.PageCount Class="mt-4 elevation-0 ml300"></MPagination>
}

@code {
    private void OnPlay(VideoState obj)
    {
        //throw new NotImplementedException();
    }

}